/* 基础设置 */
/* 设置版心 让整体在中间位置 */
.container {
    width: 1190px;
    /* 整体居中 */
    margin: 0 auto;
}

/* #region导航栏顶部布局计start */
.topbar {
    height: 30px;
    background-color: rgba(189, 189, 190, 0.689)
}

.welcome {
    /* 文字垂直对齐 */
    line-height: 30px;
    height: 30px;
     /* 清除回车造成的一定距离 */
    font-size: 0;
    color: #666666;
}

.welcome span,.welcome a {
    font-size: 12px;
}
.welcome .welcomeyou {
    margin-right: 28px;
}

.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666666;
}

.welcome .register {
    padding-left: 10px;
}

.topbar_nav .list li {
    float: left;
}

.topbar_nav .list li a {
    padding: 0 15px;
    border-right: 1px solid #666666;
}

.topbar_nav .list {
    /* 设置垂直居中 */
    line-height: 30px;
}

.topbar_nav .list li:first-child a {
    /* 针对第一个跟最后一个在格式上不一样 使用伪类选择器进行修改 */
    padding-left: 0px;
}

.topbar_nav .list li:last-child a {
    /* 针对第一个跟最后一个在格式上不一样 使用伪类选择器进行修改 */
    padding-right: 0px;
    border: 0;
}
/* #endregion导航栏顶部布局计end */

/* #region首页 - 头部设计start */
.header {
    height: 120px;
}

.header .search form {
    /* 设置整体向下移动 */
    margin-top: 42px;
    font-size: 0;
}

.header .search input {
    width: 508px;
    height: 34px;
    border: 1px solid red;
}

.header .search button {
    width: 80px;
    height: 36px;
    background-color: red;
    vertical-align: top;
    background-image: url('../images/serch_icon.png');
    /* 放置图片重复 */
    background-repeat: no-repeat;
    /* 设置图片的具体位置  水平方向 垂直方向*/
    background-position: 28px 6px;
}
/* #endregion首页 - 头部设计end */

/* #region主导航栏start */
.main_nav {
    height: 48px;
    border-bottom: 1px solid red;
}

.main_nav .shoptypes {
    width: 190px;
    background-color: red;
    /* 字体相关设置 */
    color: white;
    font-size: 16px;
    height: 48px;
    text-align: center;
    line-height: 48px;

}

.main_nav .navs li {
    float: left;
    text-align: center;
    line-height: 48px;
    color: white;
    font-size: 16px;

    margin: auto 10px;
}
/* #endregion主导航栏end */

/* #region主内容区 - 左导航栏start */
.main_content {
    margin-top: 10px;
}

.main_content .slide_nav {
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    /* 父类元素设置为绝对定位 */
    position: relative;
}

.main_content .slide_nav li {
    font-size: 14px;
    /* 将li撑开 从而做到直接设置上下的距离 */
    height: 28px;
    /* 移动文字位置 */
    line-height: 28px;
    /* 注意一个地方 背景色是不填充margin的 但是是填充padding的 */
    padding: 0 16px;
}

.main_content .slide_nav li:hover {
    background-color: red;
}

.main_content .slide_nav li:hover>a {
    /* 设置悬浮时超链接的颜色 */
    color: white;
}

/* #endregion主内容区 - 左导航栏end */



/* #region主内容区 - 左导航栏 - 二级导航栏 start */

.main_content .slide_nav .second-menu {
    width: 700px;
    height: 458px;
    background-color: white;
    /* 子类元素设置为固定元素 */
    position: absolute;
    top: 0;
    left: 190px; 

    /* 不展示 */
    display: none;
}

/* 展示的具体内容 */
.main_content .slide_nav li:hover .second-menu {
    /* 内容展示 */
    display: block;
}

.second-menu dt {
    height: 36px;
    width: 36px;
}


.second-menu dt {
    margin-left: 20px;
    font-weight: bold;
    float: left;
    width: 70px;
    margin-right: 10px;
}

.second-menu dd {
    float: left;
}

/* 内部文字设置样式 */
.second-menu dd a {
    /* 这里注意不能使用margin 因为在使用border的时候 其内部包含的是padding */
    padding: 0 10px;
    border-left: 1px solid rgb(11, 11, 11);
}

.main_content .banner {
    width: 690px;
    height: 458px;
    background-color: gray;
    margin: 0 10px;
}

.main_content .slide_other {
    width: 290px;
    height  : 458px;
    /* background-color: rebeccapurple; */
}

.slide_other .message {
    width: 260px;
    height: 156px;
    border: 1px solid #D9D9D9;
    margin-bottom: 10px;
    /*这里要注意 内部的padding都是占用一定的空间的 所以padding大小改变了之后对应的高度也要发生变化 */
    padding: 0 14px;
}

.slide_other .message .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #D9D9D9;
} 

.slide_other .message .title span {
    font-size: 14px;
    font-weight: bold;
}

.slide_other .msg-list li {
    height: 26px;
    /* 垂直对齐 */
    line-height: 26px;
}


.slide_other .button-nav {
    width: 288px;
    height: 288px;
    border: 1px solid #D9D9D9;
}

.slide_other .button-nav-list li {
    height: 70px;
    width: 48px;
    /* 横向排开 左浮动 */
    float: left;
    margin: 0 11px;

    /* 文字 */
    text-align: center;
    font-weight: bold;

    /* 使得所有文字都能点击 */
    cursor: pointer;
}

.slide_other .button-nav-list li:first-child {
    margin-left: 16px;
}

.slide_other .button-nav ul:first-child {
    margin-top: 16px;
}

.slide_other .button-nav ul:nth-child(2) {
    margin: 17px 0;
}

/* 第一行 */
.button-nav ul:nth-child(1) li:nth-child(1) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
}

.button-nav ul:nth-child(1) li:nth-child(2) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -48px 0;
}

.button-nav ul:nth-child(1) li:nth-child(3) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -96px 0;
}

.button-nav ul:nth-child(1) li:nth-child(4) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -144px 0;
}

/* 第二行 */
.button-nav ul:nth-child(2) li:nth-child(1) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: 0 -48px;
}

.button-nav ul:nth-child(2) li:nth-child(2) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -48px -48px;
}

.button-nav ul:nth-child(2) li:nth-child(3) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -96px -48px;
}

.button-nav ul:nth-child(2) li:nth-child(4) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -144px -48px;
}

/* 第三行 */
.button-nav ul:nth-child(3) li:nth-child(1) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: 0 -96px;
}

.button-nav ul:nth-child(3) li:nth-child(2) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -48px -96px;
}

.button-nav ul:nth-child(3) li:nth-child(3) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -96px -96px;
}

.button-nav ul:nth-child(3) li:nth-child(4) .picture {
    height: 48px;
    width: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -144px -96px;
}
/* #endregion主内容区 - 左导航栏 - 二级导航栏 end */


/* #region 秒杀专场start */
.seckill img {
    float: left;
    margin-top: 10px;
    margin-right: 11px;
}

.seckill img:last-child{
    margin-right:0;
}
/* #endregion 秒杀专场end */



/* #region 楼层区域 设置悬浮 start */
.floor {
    margin-top: 20px;
}

.floor span {
    font-size: 20px;
    font-weight: bold;
}

.floor .floor-top {
    padding-bottom: 4px;
    border-bottom: 1px solid red;
}


.floor .floor-top dt {
    padding-right: 10px;
    border-right: 1px solid black;
    color: red;
    float: left;
}
.floor .floor-top dd {
    padding: 0 10px;
    float: left;
    /* 外边框 */
    border-right: 1px solid black;
}

.floor .floor-top dd:last-child {
    border-right: none;
}

/* 楼层下部分详细信息 */
.floor .floor-button .item {
    float: left;
}
.floor-button .item1 {
    width: 190px;
    height: 392px;
    padding: 20px;
}

.floor-button .item1 .item1-list {
    margin-bottom: 29px;
}

.floor-button .item1 .item1-list li {
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid rgba(33, 32, 32, 0.064);
    font-size: 16px;
    text-align: center;
}

/* 不同的位置向两边浮动 确保中间位置是有空余的 */
.floor-button .item1 .item1-list li:nth-child(2n-1) {
    float: left;
}

.floor-button .item1 .item1-list li:nth-child(2n) {
    float: right;
}

.floor-button .item1 .item1-list li:nth-child(3),.item1-list li:nth-child(4) {
    margin: 14px 0;
}

.floor-button .item2 {
    width: 340px;
    height: 432px;
}

.floor-button .item3 {
    width: 206px;
    height: 432px;
    border-right: 1px solid rgb(255, 255, 255);
}

.floor-button .item3 img {
    border-bottom: 1px solid rgb(255, 255, 255);
}

.floor-button .item4 {
    width: 206px;
    height: 432px;
    border-right: 1px solid rgb(255, 255, 255);
}

.floor-button .item4 img {
    border-bottom: 1px solid rgb(255, 255, 255);
}

.floor-button .item5 {
    width: 206px;
    height: 432px;
}

.floor-button .item5 img {
    border-bottom: 1px solid rgb(255, 255, 255);
}



/* #endregion 楼层区域 end */


/* #region 页脚区域 start */
.footer {
    height: 440px;
    background-color: black;
}

.footer .top-links .links-list {
    float: left;
    width: 190px;
    margin-top: 48px;
    /* 设置全部边距为10px */
    margin-right: 10px;
}

.footer .top-links .links-list:last-child{
    margin-right: 0;
}

.footer .top-links li a{
    color: white;
}

.footer .line {
    margin-top: 22px;
    height: 1px;
    background-color: #807a7a;
}

.footer .bottom-links li {
    float: left;
    padding-right: 10px;
}

.footer .bottom-links li a {
    padding: 0 26px;
    border-right: 1px solid #f7f7f7;
}

.footer .bottom-links li:last-child a {
    padding-right: 0px;
    border: 0px;
}

.footer .bottom-links li a{
    color: white;
}

/* 另一方面 想要水平居中 我们可以参考一下行内元素是如何水平居中  块元素无法使用这种方式水平居中 但是行内块元素 以及行内元素可以 */
.bottom-links {
    text-align: center;
}

.bottom-links-list {
    display: inline-block;
}  


/* .bottom-links-list {
/* 这是一个着重注意点 */
    /* 这里要使用margin让其居中 那么必须设置其宽度 才能让指定的块在父块当中水平居中 */
    /* width: 800px;
    margin: 0 auto; */
/* } */




/* #endregion 页脚区域 end */